<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/myacode/pen/PoqQQNM</title>

    <link rel="stylesheet" href="./style.css">
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://codepen.io/jasesmith/pen/bb578a401c45e3f38f096eb64646e76b.js"></script>
</head>
<body>
<main v-cloak>
    <div class="tools">
        <div>
            <input type="color" v-model="color1" />
            <input type="text" v-model="color1" />
        </div>
        <div>
            <div class="vertical-range"><input type="range" :min="min" :max="max" v-model="steps" /></div>
            <div class="steps">{{visualSteps}} {{visualStepsLabel}}</div>
        </div>
        <div>
            <input type="color" v-model="color2" />
            <input type="text" v-model="color2" />
        </div>
    </div>
    <div class="colors">
        <div class="color" v-for="color in colors" :style="setStyles(color)">&nbsp;{{colorName(color)}}</div>
    </div>
</main>



</body>
<script src="script.js" type="module"></script>
</html>